<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>结课作业</title>
    <style>
        body{
            padding: 0;
            margin: 0;
            outline: none;
            /* 默认样式配置和解决白边 */
        }
        ul,li{
            padding:0;
            margin:0;
            list-style:none
        }
        .topBar{
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 60px;
            padding: 10px 0px;
            background-color: rgba(0, 0, 0, 0.5);
            color: #fff;
            position: fixed;
            width: 100%;
        }
        .left{
            display: flex;
            align-items: center;
            font-size: 30px;
            transform: translateX(50%);
        }
        .topBarImg{
            height: 40px
        }
        .menu{
            padding: 5px;
            transform: translateX(-30%);
        }
        .menu-outer{
            margin: 0 1em;
        }
        .menu-outer:hover{
            cursor: pointer;
            color: rgb(83, 255, 232);
        }
        .menu-outer:active{
            color: rgb(255, 161, 53);
        }
        .menu-manager{
            background-color: rgb(110, 110, 110);
            padding: 0.5em;
            border-radius: 0.5em;
        }
        .menu-manager:hover{
            cursor: pointer;
            background-color: rgb(78, 78, 78);
            color: rgb(175, 175, 175);
        }
        .menu-manager:active{
            background-color: rgb(255, 191, 53);
            color: rgb(255, 255, 255);
        }
        /* topbar */
        

        header{
            background-image: url(./images/city.jpg);
            background-size:cover;
            background-repeat: no-repeat;
            background-position: center;
            width: 100%;
            height:60vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .welcome{
            color: #fff;
            font-size: 4em;
            font-weight: 900;
        }
        /* header */

        .container{
            /* background-color: aquamarine; */
            margin: 0 10%;
        }
        .purposes{
            display: flex;
        }
        .purpose{
            display: flex;
            flex-direction: column;
            width: 100%;
        }
        .purpose-img{
            width: 100%;
            border-radius: 5px;
            
        }
        .purposes :first-child {
            padding-right: 1em;
        }
        #purpose-2{
            padding-right: 1em;
        }
        #purpose-3{
            padding-right: 1em;
        }
        .container-title{
            display: block;
            font-size: 300%;
            padding-top: 4em;
            padding-bottom: 1em;
        }
        .purpose-title{
            font-size: 20px;
            padding: 10px 0;;
        }

        /* class */
        .class-manage{
            display: flex;
            justify-content: center;
            margin: 1.5em 0;
            font-size: 4rem;
            justify-content: center;
        }
        .class-details{
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 1em 0;
        }
        .class-img{
            width: 10%;
            border-radius: 50%;
            margin-right: 1.5em;
        }
        .class-title{
            font-size: 150%;
            padding: 10px 0;
        }
        .class-text{
            font-size: 0.9em;
        }
        .class-tags-1{
            background-color: blueviolet;
            color: #fff;
            border-radius: 10px;
            display: inline;
            padding: 0 .5em;
            font-size: 0.9em;
        }
        .class-tags-2{
            background-color: rgb(22, 145, 11);
            color: #fff;
            border-radius: 10px;
            display: inline;
            padding: 0 .5em;
            font-size: 0.9em;
        }
        .class-tags-3{
            background-color: rgb(90, 22, 247);
            color: #fff;
            border-radius: 10px;
            display: inline;
            padding: 0 .5em; 
            font-size: 0.9em;  
        }

        /* footer */
        footer{
            width: 100%;
            background-color: rgb(207, 205, 205);
            display: flex;
            justify-content:space-around;
            align-items: center;
            padding: 5em 0;
        }
        .ife{
            display: flex;
        }
        .ife-child{
            margin: 0.5em;
            font-size: 300%;
            color: #fff;
            width: 1.5em;
            height: 1.5em;
            background-color: black;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: 400;
        }
        .links{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .link-title{
            margin: 1em 0;
            font: 1.5em sans-serif ;
        }
        .link{
            margin: 0 2em;
        }
        li{
            padding: 5px 0;
            cursor: pointer;
        }
        li:hover{
            color: rgb(102, 102, 102);
        }
        li:active{
            color: rgb(104, 27, 248);
        }

        /* form */
        .apply{
            display: flex;
            justify-content:space-around;
            align-items: center;
            box-shadow: 0 0 0 white,
            0.3em 0.3em 0.3em rgb(223, 223, 223),
            0.3em 0.3em 0.3em rgb(218, 218, 218),
            0em 0.3em 0 rgb(228, 227, 227);
            width: 70%;
            border-radius: 20px;
            z-index: 99;
            transform: translate();
            padding-right: 3em;
            background-color: white;
            padding-bottom: 1em;
        }
        .select-box{
            margin:1em 1em;
            padding: 0 0em;

        }
        select{
            outline:none;
            padding: 1em 0.5em;
            border: none;
            background-color: whitesmoke;
            width: 150%;
            border-radius: 10px;
        }
        .select-title{
            margin: 0.5em 0;
            font-size: 1.3em;
        }
        .input{
            outline:none;
            padding: 1em 0.5em;
            border: none;
            background-color: whitesmoke;
            width: 150%;
            border-radius: 10px;
        }
        .btu{
            border: none;
            background-color: rgb(69, 114, 238);
            color: #fff;
            padding: 1em 3em;
            border-radius: 3em;
            transform: translate(50%,50%);

        }
        .btu:hover{
            cursor: pointer;
        }
        .btu:active{
            background-color: rgb(245, 138, 119);
        }
        .apply-form{
            display: flex;
            justify-content: center;
            transform: translateY(-30%);
            z-index: 999;
        }
    </style>
</head>
<body>
    <div class="topBar">
        <div class="left">        
            <img src="./images/智能云.png" class="topBarImg">
            <span class="headerName">智能小程序</span>
        </div>
        <div class="menu">
            <span class="menu-outer">开发文档</span>
            <span class="menu-outer">交流中心</span>
            <span class="menu-outer">服务市场</span>
            <span class="menu-outer">开源联盟</span>
            <span class="menu-manager">管理中心</span>
        </div>
    </div>
    <header>
        <span class="welcome">百度前端训练营2021开营了，赶紧报名吧！</span>
    </header>
    <div class="apply-form">
        <div class="apply">
            <div class="select-box">
                <div class="select-title">选择您的学校</div>
                <form action="">
                    <div class="select">
                        <select name="" id="">
                            <option selected="selected" disabled="disabled"  style='display: none' value=''></option>
                            <!-- 去除默认的option   -->
                            <option value="">清华大学</option>
                            <option value="">北京大学</option>
                            <option value="">上海交通大学</option>
                            <option value="">西北科技大学</option>
                            <option value="">大连理工大学</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="select-box">
                <div class="select-title">选择您的入学年份</div>
                <form action="">
                    <div class="select">
                        <select name="" id="">
                            <option selected="selected" disabled="disabled"  style='display: none' value=''></option>
                            <option value="">2021</option>
                            <option value="">2020</option>
                            <option value="">2019</option>
                            <option value="">2018</option>
                            <option value="">2017</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="select-box">
                <div class="select-title">请输入您的电子邮箱</div>
                <input type="text" class="input">
            </div>
            <div class="form-btu">
                <button class="btu">报名</button>
            </div>
        </div>
    </div>
    <div class="container">
        <span class="container-title">我们的宗旨</span>
        <div class="purposes">
            <div class="purpose"><span class="purpose-title">· 自律独立思考</span><img src="./images/think-1.png" class="purpose-img"></div>
            <div id="purpose-2" class="purpose"><span class="purpose-title">· 实践</span><img src="./images/think-2.png" class="purpose-img"></div>
            <div id="purpose-3" class="purpose"><span class="purpose-title">· 总结回顾</span><img src="./images/think-3.png" class="purpose-img"></div>
            <div class="purpose"><span class="purpose-title">· 分享交流</span><img src="./images/think-4.png" class="purpose-img"></div>
        </div>
        <div class="class">
            <div class="class-manage">
                课程安排
            </div>
            <div class="class-scroll">
            </div>
            <div class="class-name">
                <div class="class-details">
                    <img src="./images/class.png" class="class-img">
                        <div class="class-container">
                        <div class="class-title">第一课 这里是课程名字</div>
                        <div class="class-text">这里是课程内容的摘要，这里是课程内容的摘要，这里是课程内容的摘要，这里是课程内容的摘要，这里是课程内容的摘要，这里是课程内容的摘要，这里是课程内容的摘要，这里是课程内容的摘要。</div>
                        <div class="class-tags-1">HTML</div>
                    </div>
                </div>
                <div class="class-details">
                    <img src="./images/class.png" class="class-img">
                        <div class="class-container">
                        <div class="class-title">第二课 这里是课程名字</div>
                        <div class="class-text">这里是课程内容的摘要，这里是课程内容的摘要，这里是课程内容的摘要，这里是课程内容的摘要，这里是课程内容的摘要，这里是课程内容的摘要，这里是课程内容的摘要，这里是课程内容的摘要。</div>
                        <div class="class-tags-2">CSS</div>
                    </div>
                </div>
                <div class="class-details">
                    <img src="./images/class.png" class="class-img">
                        <div class="class-container">
                        <div class="class-title">第三课 这里是课程名字</div>
                        <div class="class-text">这里是课程内容的摘要，这里是课程内容的摘要，这里是课程内容的摘要，这里是课程内容的摘要，这里是课程内容的摘要，这里是课程内容的摘要，这里是课程内容的摘要，这里是课程内容的摘要。</div>
                        <div class="class-tags-3">javascript</div>
                    </div>
                </div>
                <div class="class-details">
                    <img src="./images/class.png" class="class-img">
                    <div class="class-container">
                        <div class="class-title">第四课 这里是课程名字</div>
                        <div class="class-text">这里是课程内容的摘要，这里是课程内容的摘要，这里是课程内容的摘要，这里是课程内容的摘要，这里是课程内容的摘要，这里是课程内容的摘要，这里是课程内容的摘要，这里是课程内容的摘要。</div>
                        <div class="class-tags-1">HTML</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <footer>
        <div class="ife">
            <div class="ife-child">I</div>
            <div class="ife-child">F</div>
            <div class="ife-child">E</div>
        </div>
        <div class="links">
            <div class="link">
                <div class="link-title">Links</div>
                <ul>
                    <li>百度技术培训中心</li>
                    <li>百度技术</li>
                    <li>技术培训中心</li>
                    <li>百度技术培训中心</li>
                </ul>
            </div>
            <div class="link">
                <div class="link-title">Links</div>
                <ul>
                    <li>百度技术培训中心</li>
                    <li>百度技术</li>
                    <li>技术培训中心</li>
                    <li>百度技术培训中心</li>
                </ul>
            </div>
            <div class="link">
                <div class="link-title">Links</div>
                <ul>
                    <li>百度技术培训中心</li>
                    <li>百度技术</li>
                    <li>技术培训中心</li>
                    <li>百度技术培训中心</li>
                </ul>
            </div>
        </div>
    </footer>
</body>
</html>